<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布留言</button>

    <ul></ul>

    <script>
        //先获取元素
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');

        //注册点击事件
        btn.onclick = function () {
            //    console.log(text.value);
            if (text.value == '') {
                alert('请输入您的留言内容');
                return false
            } else {
                //添加元素
                var li = document.createElement('li')
                li.innerHTML = text.value + "<a href='javascript:;''>删除</a>";
                ul.insertBefore(li,ul.children[0]);

                //删除元素，也就是点击删除的时候，删除的是父节点也就是li
                //先遍历拿到所有的a
                var as = document.querySelectorAll('a');
                for(var i = 0; i < as.length; i++){
                    //拿到具体的某一个a标签，执行点击事件
                    as[i].onclick = function(){
                        ul.removeChild(this.parentNode)
                    }

                }
            }

        }
    </script>

</body>

</html>